<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script type="text/javascript" src="../../../static/jquery/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../../static/jquery/js/jquery-ui-1.8.23.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../../static/jquery/css/ui-lightness/jquery-ui-1.8.23.custom.css">
  <script>
  	$(function(){
  		$("#tabs").tabs({
  			heightStyle:"fill"
  		});
  		
  		$(".bottom .ui-tabs-nav,.bottom .ui-tabs-nav>*")
  		.removeClass("ui-corner-all ui-corner-top")
  		.addClass("ui-corner-bottom");
  		$(".bottom .ui-tabs-nav").appendTo(".bottom");
  	});
  </script>
  
  <style type="text/css">
  	
  	#tabs .tabs-spacer { float: left; height: 400px; }
    .bottom .ui-tabs-nav { clear: left; padding: 0 .2em .2em .2em; }
    .bottom .ui-tabs-nav li { top: auto; bottom: 0; margin: 0 .2em 1px 0; border-bottom: auto; border-top: 0; }
    .bottom .ui-tabs-nav li.ui-tabs-active { margin-top: -1px; padding-top: 1px; }
  </style>
</head>
<body>
<div class="wrap">
	<div id="tabs" class="bottom">
	    <ul>
			<li><a href="/jsp/test/jquery/tab21.html"><span>one</span></a></li>
			<li><a href="/test/tab2.do"><span>two</span></a></li>
			<li><a href="/jsp/test/jquery/tab23.jsp"><span>three</span></a></li>
		</ul>
	</div>
</div>

</body>
</html>